<template>
  <div class="forum-poster">
    <div style="position: fixed; right: 40px; top: 40px; z-index: 999">
      <button id="musciBtn" class="music-btn" @click="toggleMusic">
        <span v-if="!isPlaying">
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 3V21M8 6V18M16 9V15"
              stroke="#2c3e50"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </span>
        <span v-else>
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect x="6" y="5" width="4" height="14" rx="1" fill="#2c3e50" />
            <rect x="14" y="5" width="4" height="14" rx="1" fill="#2c3e50" />
          </svg>
        </span>
      </button>
      <audio id="audioPlayer" autoplay loop>
        <source src="@/assets/audio/background.mp3" type="audio/mp3" />
      </audio>
    </div>
    <div class="card">
      <div class="logo">
        <img style="width: 150px" src="@/assets/images/forum-logo.png" alt="全球食品饮料论坛" />
      </div>
      <div class="header" style="margin-top: 100px">
        <h1 style="font-size: 32px; color: #3498db" class="animate__backInLeft animate__animated">
          邀请函
        </h1>
        <h2 style="font-size: 18px; color: #3498db" class="animate__backInRight animate__animated">
          2025第三届全球食品饮料论坛（GFBF）
          <span style="font-size: 16px">2025 The 3rd Global Food and Beverage Forum (GFBF)</span>
        </h2>
        <h2 style="font-size: 18px; color: #3498db" class="animate__backInLeft animate__animated">
          第九届中阿经贸合作论坛（CAF）
        </h2>
        <h2 style="font-size: 16px; color: #3498db" class="animate__backInLeft animate__animated">
          9th China-Arab Economic and Trade Cooperation Forum (CAF)
        </h2>
        <p
          class="subtitle animate__backInRight animate__animated"
          style="margin-top: 2em; font-size: 16px"
        >
          全球食饮新未来 · 中阿经贸新机遇
        </p>
        <p class="subtitle animate__backInRight animate__animated">
          New Future of Global Food and Beverage Industry · New Opportunities for China-Arab Trade
        </p>
        <p
          class="subtitle animate__backInLeft animate__animated"
          style="margin-top: 2em; font-size: 14px"
        >
          2025年6月25日-28日 · 中国·博鳌亚洲论坛国际会议中心
        </p>
        <p class="subtitle animate__backInLeft animate__animated">
          June 25th - 28th, 2025 · Boao Forum for Asia International Conference Center, China
        </p>
      </div>

      <div class="content">
        <div class="introduction">
          <h3>论坛介绍</h3>

          <h4 style="color: #000; font-size: 18px; font-weight: bold">
            尊敬的行业领袖与合作伙伴：
          </h4>
          <div class="animate__zoomIn animate__animated">
            <p style="text-indent: 2em">
              在全球食品饮料产业加速变革、中阿经贸合作深化拓展的关键时刻，我们诚挚邀请您莅临2025第三届全球食品饮料论坛（GFBF）与第九届中阿经贸合作论坛（CAF），两大国际性论坛首度联袂，共绘行业发展新蓝图！
            </p>
            <p style="text-indent: 2em">
              本届论坛以“破卷破规向新而行”为主题，汇聚50+国家政商代表、全球头部企业、行业智库及创新先锋，聚焦海南自贸港政策机遇、数字化交易、供应链优化、功能性食品等热点议题，打造全球食饮产业最具影响力的思想碰撞与商业合作平台。
            </p>
          </div>
          <h3>论坛亮点抢先看</h3>

          <div class="animate-on-scroll">
            <h5>1.政策与市场机遇</h5>
            <ul>
              <li>
                海口海关及中国检验认证专家深度解读海南自贸港封关政策，助力企业把握出海与进口新机。
              </li>
              <li>全球食品饮料数字化交易平台与数字博览馆首发亮相，赋能产业数字化转型。</li>
            </ul>
          </div>
          <div class="animate-on-scroll">
            <h5>2.前沿趋势发布</h5>
            <ul>
              <li>
                重磅发布《2025全球食品饮料行业独家数据报告》，解析Z世代消费、药膳产业爆发、餐饮跨界融合等核心趋势。
              </li>
              <li>“一县一品样板县” 产品集中展示，推动地方特色品牌全球化。</li>
            </ul>
          </div>
          <div class="animate-on-scroll">
            <h5>3.科技与创新实践</h5>
            <ul>
              <li>
                重磅发布《2025全球食品饮料行业独家数据报告》，解析Z世代消费、药膳产业爆发、餐饮跨界融合等核心趋势。
              </li>
              <li>“一县一品样板县” 产品集中展示，推动地方特色品牌全球化。</li>
            </ul>
          </div>
          <div class="animate-on-scroll">
            <h5>4.商贸对接与投资机会</h5>
            <ul>
              <li>食品饮料项目路演暨投资对接会，链接资本与优质项目。</li>
              <li>老挝中国食品饮料博览会、巴拿马世博会中国品牌大展方案全球首发。</li>
            </ul>
          </div>
          <div class="animate-on-scroll">
            <h5>5.特色活动体验</h5>
            <ul>
              <li>博鳌国际啤酒文化节扩容，多品牌品鉴会邀您共襄盛举。</li>
              <li>“论坛嘉宾走区县” 定制考察，探访博鳌乐城国际医疗旅游先行区等重点园区。</li>
            </ul>
          </div>

          <h3>往届精彩回顾</h3>
          <div class="highlights">
            <div class="highlight-item animate-on-scroll" @click="open2023">
              <p>来自世界各地的多位专家学者、政商精英齐聚博鳌，为世界食品饮料行业发展建言献策。</p>
              <h5 style="text-decoration: underline">2023全球食品饮料论坛</h5>
              <img src="./images/641.jpg" style="width: 100%" />
            </div>
            <div class="highlight-item animate-on-scroll" @click="open2022">
              <h5 style="text-decoration: underline">2022年全球食品饮料论坛</h5>
              <img src="./images/640.jpg" style="width: 100%" />
            </div>
          </div>
        </div>

        <el-link :icon="Connection" type="primary" @click="toPDF">
          2025年全球食品饮料论坛招商手册
        </el-link>
      </div>
    </div>
    <div class="card animate-on-scroll" style="margin-top: 20px">
      <Form />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Connection } from "@element-plus/icons-vue";
import Form from "./components/form.vue";
import { useRouter } from "vue-router";
import link from "@/assets/2025.pdf";
const router = useRouter();

const isPlaying = ref(false);
const animatedElements = ref<HTMLElement[]>([]);

function toggleMusic() {
  const audioPlayer = document.getElementById("audioPlayer") as HTMLAudioElement;
  if (isPlaying.value) {
    audioPlayer.pause();
  } else {
    audioPlayer.play();
  }
}

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("animate__animated", "animate__fadeInUp");
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.1 }
);

onMounted(() => {
  const audioPlayer = document.getElementById("audioPlayer") as HTMLAudioElement;
  audioPlayer.onplay = () => {
    isPlaying.value = true;
  };
  audioPlayer.onpause = () => {
    isPlaying.value = false;
  };

  // 观察所有需要动画的元素
  document.querySelectorAll(".animate-on-scroll").forEach((el) => {
    observer.observe(el);
  });
});

function open2023() {
  window.open("https://mp.weixin.qq.com/s/5CDcLQIkrPedoXauSmvU4g", "_blank");
}

function open2022() {
  window.open("https://mp.weixin.qq.com/s/jRiUBFCzs4UpkTkKXieH1A", "_blank");
}

function toPDF() {
  window.open(link, "_blank");
}

onBeforeUnmount(() => {
  observer.disconnect();
});
</script>

<style lang="scss" scoped>
.forum-poster {
  max-width: 1200px;
  height: 100vh;
  overflow: auto;
  margin: 0 auto;
  padding: 20px;
  color: #333;
  background-image: url("@/assets/images/apply-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  ul {
    list-style: inside;
  }

  .header {
    text-align: center;

    h1 {
      font-size: 3rem;
      color: #2c3e50;
    }

    h2 {
      font-size: 1.5rem;
      color: #7f8c8d;
    }
  }

  .content {
    .introduction {
      margin-bottom: 2rem;

      h3 {
        font-size: 1.8rem;
        color: #2c3e50;
        margin-bottom: 1rem;
        border-top: 2px solid #3498db;
        padding-bottom: 0.5rem;
        text-align: center;
        padding-top: 1.5em;
      }

      h4 {
        font-size: 1.5rem;
        color: #3498db;
        margin: 1.5rem 0 0.8rem;
      }

      h5 {
        font-size: 1.3rem;
        color: #2c3e50;
        margin: 1rem 0 0.5rem;
      }

      p,
      li {
        font-size: 14px;
        line-height: 1.6;
      }

      .highlights {
        margin: 1rem 0;
        .highlight-item {
          background: #f8f9fa;
          padding: 1rem;
        }
      }

      .testimonials {
        margin: 1.5rem 0;
        blockquote {
          font-style: italic;
          color: #555;
          padding: 1rem;
          margin: 1rem 0;
          border-left: 3px solid #3498db;
          background: #f8f9fa;
          cite {
            display: block;
            margin-top: 0.5rem;
            font-style: normal;
            color: #7f8c8d;
          }
        }
      }
    }

    .image-section {
      margin-bottom: 2rem;

      img {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }
    }

    .details {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2rem;

      .date-location,
      .speakers {
        width: 48%;

        h3 {
          font-size: 1.8rem;
          color: #2c3e50;
          margin-bottom: 1rem;
          border-bottom: 2px solid #3498db;
          padding-bottom: 0.5rem;
        }

        p,
        li {
          font-size: 1.2rem;
          line-height: 1.6;
        }
      }
    }

    .cta {
      text-align: center;
      margin-top: 2rem;

      p {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
      }

      .register-btn {
        background: #3498db;
        color: white;
        border: none;
        padding: 1rem 2rem;
        font-size: 1.2rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: #2980b9;
        }
      }
    }
  }

  .card {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;

    .logo {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
    }
  }
}
</style>
